<div id="app">
  {{title}}
</div>
​

<script>
   // 扩展性
   const Vue={
    createRenderer({querySelector,insert}){
    //  返回渲染器
     return{
        
    },
    //返回app实例
    createApp(options){
      const renderer=Vue.createRenderer({

      })

  }
}
   }

</script>



<script>
  const Vue={
    createApp(options){
      // 返回app实例
      return{
        mount(seletor){
          console.log("mount!")
          // 1.找到宿主元素
          const parent=document.querySelector(seletor)
          // 2.渲染页面
          // 2.1 处理template：编译
          if(!options.render){
            options.render=this.compile(parent.innerHTML)
          }
          // 2.2 用户直接编写render
          // ctx把data返回值作为上下文




          if(options.setup){
            this.setupState=options.setup();
          }
          if(options.data){
            this.data=options.data();
          }

          // setup和其他选项做兼容
          const proxy=new Proxy(this,{
            get(target,key) {
              // 先从setup中取，再到data中取
              if(target.setupState&&key in target.setupState){
                return target.setupState[key]
              }else{
                return target.data[key]
              }
            },
            set(target,key,val) {
              // 先从setup中取，再到data中取
              if(target.setupState&&key in target.setupState){
                target.setupState[key]=val
              }else{
                target.data[key]=val;
                
              }
            },
          })




          // const el=options.render.call(options.data())
          const el=options.render.call(proxy)   //兼容性


          // 3.追加到宿主
          parent.innerHTML=''
          // insert(el)





          parent.appendChild(el)

        },
        compile(template){
          // 返回一个render函数
          // parser->ast
          // generate->ast=>render
          return function render(){
            const h3=document.createElement('h3')
            h3.textContent=this.title
            return h3
          }
        }
      }
    }
  }
</script>


<script>
const app = Vue.createApp({
  data() {
    return {
      title: 'Hello Vue3!!'
    }
  },
  setup(){
    return{
      title:'vue3,hello!---setup'
    }
  }
})

app.mount('#app')
</script>